<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/10/21
  Time: 13:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <title>派送</title>
    <!DOCTYPE html>
    <head>
        <style>
            /* 为包含按钮的父元素添加样式，使其内容居中 */
            .button-container {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column; /* 使按钮纵向排列 */
                margin-top: 20px; /* 根据需要调整按钮与上方内容的间距 */
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>骑行路线规划</title>
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5k8Rpa7Bi5HSNNuhjT0EqI6GvMfdQaxe"></script>
        <script src="${path}/static/js/jquery-3.2.1.min.js"></script>
        <style type="text/css">
            body, html,#container {width: 80%;height: 80%;overflow: hidden;margin:0 auto;font-family:"微软雅黑";}
        </style>
    </head>
<body>
        <div id="container"></div>
        <div style="margin: auto 0">
        </div>
            <div style="display: flex">
            <form action="${path}/runner/complete">
                <input type="hidden" name="id" value="${requestScope.order.id}">
                <div class="button-container">
                <input type="submit" value="完成订单">
                </div>
            </form>
                <div class="button-container">
            <button onclick="location.href='${path}/runner/index'" style="margin:50px auto; width: 50px; height: 30px;">返回</button>
                </div>
            </div>

<script type="text/javascript">
    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(${requestScope.order.task.useraddress.longitude},${requestScope.order.task.useraddress.latitude}), 14);
    var riding = new BMapGL.RidingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true

        }
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var start = new BMapGL.Point(position.coords.longitude, position.coords.latitude);
            var end = new BMapGL.Point(${requestScope.order.task.useraddress.longitude}, ${requestScope.order.task.useraddress.latitude});
            riding.search(start, end);
        }, function (error) {
            console.error('获取位置失败：', error);
        });
    } else {
        console.error('浏览器不支持地理定位。');
    }
    map.setMinZoom(3); // 设置最小缩放级别，可根据需求调整
    map.setMaxZoom(19); // 设置最大缩放级别，可根据需求调整
</script>
</body>
</html>
</head>
<body>
</body>
</html>
